<script setup lang="ts"></script>
<template>
    <div class="f-page f-page-navigate">
        <f-splitter class="f-page-content">
            <template #left>
                <div>This is navigation panel on left.</div>
            </template>
            <template #main>
                <f-splitter>
                    <template #left>
                        <div>This is navigation panel on top.</div>
                    </template>
                    <template #main>
                        <div>This is main panel on center.</div>
                    </template>
                    <template #right>
                        <div>This is navigation panel on botttom.</div>
                    </template>
                </f-splitter>
            </template>
            <template #right>
                <div>This is navigation panel on right.</div>
            </template>
        </f-splitter>
    </div>
</template>
